<template>
  <div class="app-container leave-apply">
    <div class="head-container">
      <div>
        <el-select v-model="search.status" class="filter-item" placeholder="请选择状态">
          <el-option label="未发起" value="0"/>
          <el-option label="进行中" value="2"/>
          <el-option label="已结束" value="3"/>
        </el-select>
        <el-button class="filter-item" type="success" icon="el-icon-search" size="mini" @click="fetchData">搜索
        </el-button>
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
      </div>
    </div>
    <div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="姓名" width="150">
          <template slot-scope="scope">
            {{ scope.row.userName }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="类型" width="150">
          <template slot-scope="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>
        <el-table-column label="请假日期" width="400" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.startTime }} {{ scope.row.startType }} 至 {{ scope.row.endTime }} {{ scope.row.endType }}</span>
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="申请日期" width="160" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.applyTime }}</span>
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="状态" align="center">
          <template slot-scope="scope">
            <wf-status :status="scope.row.nodeName"/>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作" width="450">
          <template slot-scope="scope">
            <work-flow-btn :row="scope.row" :baseBtnVisible="baseBtnVisible" :permission="permission" @execDynamicMethod="execDynamicMethod"/>
          </template>
        </el-table-column>
      </el-table>

      <!--分页组件-->
      <el-pagination
        style="margin-top: 8px"
        layout="total, prev, pager, next"
        :page-size="search.pageSize"
        :total="search.total"
        prev-text="上一页"
        next-text="下一页"
        :current-page="search.pageNo + 1"
        @current-change="paginationChange"
      >
      </el-pagination>

      <detail v-model="dialogVisible" :data="form" :btns="btns" :readonly="readonly" @reload="fetchData"></detail>
    </div>
  </div>
</template> 

<script>
  import {getList, delItem} from '@/api/wf/leave'
  import {MessageBox} from 'element-ui'
  import msgUtil from '@/utils/msgUtil'
  import WorkFlowBtn from '@/components/WorkFlow/table'
  import Detail from '../detail'
  import WfStatus from '@/components/WorkFlow/status/index'

  export default {
    components: {
      WorkFlowBtn,
      WfStatus,
      Detail
    },
    data() {
      return {
        search: {
          pageNo: 0,
          total: 0,
          pageSize: 10,
          type: null,
          startTime: null,
          endTime: null,
          startUserName: null,
          status: null
        },
        baseBtnVisible:{
          detail: true,
          edit: true,
          del: true,
        },
        permission: {
          detail: ['100', 'leave:detail'],
          edit: ['100', 'leave:edit'],
          del: ['100', 'leave:del'],
        },
        form: {},
        list: null,
        listLoading: true,
        dialogVisible: false,
        readonly: false,
        btns:[]
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      execDynamicMethod(method, obj){
        this[method](obj)
      },
      // 当前页改变
      paginationChange(e) {
        this.search.pageNo = e;
        this.fetchData();
      },
      add() {
        this.form = null
        this.dialogVisible = true
        this.readonly = false
        this.btns = ["暂存", "上报"]
      },
      edit(obj) {
        debugger
        this.form = JSON.parse(JSON.stringify(obj));
        this.readonly = false
        this.dialogVisible = true
        this.btns = ["暂存"]
      },
      detail(obj) {
        this.form = JSON.parse(JSON.stringify(obj));
        this.readonly = false
        this.dialogVisible = true
        this.btns = []
      },
      submit(obj) {
        this.form = JSON.parse(JSON.stringify(obj));
        this.readonly = false
        this.dialogVisible = true
        this.btns = ["上报"]
      },
      approve(obj) {
        this.form = JSON.parse(JSON.stringify(obj));
        this.readonly = false
        this.dialogVisible = true
        this.btns = ["审批", "驳回"]
      },
      del(obj) {
        MessageBox.confirm('确定要删除？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const param = {
            params: {
              id: obj.id
            }
          }
          delItem(param).then(res => {
            if (res.code === 200) {
              msgUtil.success2('删除成功!')
              this.dialogVisible = false
              this.fetchData()
            }
          })
        })
      },
      fetchData() {
        this.listLoading = true
        const param = this.search
        getList(param).then(response => {
          if (response.code === 200) {
            this.list = response.data.records
            this.search.pageNo = response.data.current
            this.search.total = response.data.total
          }
          this.listLoading = false
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .leave-apply {
    .search-item {
      margin-right: 10px;
    }

    ::v-deep .el-tabs__content {
      height: 100vh;
    }

    ::v-deep .vue-treeselect__menu {
      height: 120px;
    }
  }
</style>
